<template>
  <div id="app">
      数据字典管理
      <el-table
        :data="returnList"
        style="width: 100%"
        row-key="id"
        border
        lazy
        :load="getChildrens"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column label="名称" width="230" align="left">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
            </el-table-column>
            <el-table-column label="编码" width="220">
            <template slot-scope="{row}">
                    {{ row.dictCode }}
            </template>
            </el-table-column>
            <el-table-column label="值" width="230" align="left">
            <template slot-scope="scope">
            <span>{{ scope.row.value }}</span>
            </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
            </template>
            </el-table-column>
        </el-table>
  </div>



</template>

<script>
import dict from '@/api/dict.js'

// 定义变量
export default {
  data() {
    return {
      returnList: []
      
    }
  },
  // 在页面渲染之前执行，一般调用methods定义的方法，得到数据
  created() {
    this.getChildDataById(1)
  },
  // 定义方法，进行请求接口调用
  methods: {
    
    // 锁定与取消锁定
    getChildDataById(id) {
      dict.getChildDataById(id)
      .then(response => {
        this.returnList = response.data;
      })
    },
    getChildrens(tree, treeNode, resolve) {
       dict.getChildDataById(tree.id).then(response => {
          resolve(response.data)
       })
    }

  }
}
</script>